<template>
  <div>
    <a-form-model ref="law_infoForm" :rules="rules" :model="infoForm">
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="法律法规编号" prop="id" has-feedback>
        <a-input :disabled="!infoForm.isAdd" v-model="infoForm.id" allow-clear :maxLength="125" placeholder="请输入法律法规编号"/>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="法律法规名称" prop="title" has-feedback>
        <a-input v-model="infoForm.title" allow-clear :maxLength="125" placeholder="请输入法律法规名称"/>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="法律性质" prop="type" has-feedback>
        <a-select allow-clear placeholder="请选择法律性质" @change="selectTypeChange" v-model="infoForm.type">
          <a-select-option v-for="item in lawTypeList" :key="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发布机关" prop="pubunitid" has-feedback>
        <a-select allow-clear placeholder="请选择发布机关" @change="selectUnitChange" v-model="infoForm.pubunitid">
          <a-select-option v-for="item in unitTypeList" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发布日期" prop="pubdate" has-feedback>
        <a-date-picker
          v-model="infoForm.pubdate"
          placeholder="请选择发布日期"
          :allowClear="true"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="施行日期" prop="execdate" has-feedback>
        <a-date-picker
          v-model="infoForm.execdate"
          placeholder="请选择施行日期"
          :allowClear="true"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="有效性" prop="status" has-feedback>
        <a-select allow-clear placeholder="请选择有效性" @change="selectStatusChange" v-model="infoForm.status">
          <a-select-option v-for="item in lawValidTypeList" :key="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="失效日期" prop="losedate" has-feedback>
        <a-date-picker
          v-model="infoForm.losedate"
          placeholder="请选择失效日期"
          :allowClear="true"
        />
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="收录日期" prop="recorddate" has-feedback>
        <a-date-picker
          v-model="infoForm.recorddate"
          placeholder="请选择收录日期"
          :allowClear="true"
        />
      </a-form-model-item>


      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="来源途径" prop="source" has-feedback>
        <a-select allow-clear placeholder="请选择来源途径" @change="selectSourceChange" v-model="infoForm.source">
          <a-select-option v-for="item in lawSrcTypeList" :key="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="发布文号" prop="pubcode" has-feedback>
        <a-input v-model="infoForm.pubcode" allow-clear :maxLength="125" placeholder="请输入发布文号"/>
      </a-form-model-item>

      <a-form-model-item>
        <div class="text-center">
          <a-button class="m-r-8" icon="reload" @click="resetForm"> 重置 </a-button>
          <a-button type="primary" @click="onSubmit" icon="save" :loading="loading"> 保存 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { Tp_lawList } from  '@/enumeration/Tp_law'
import { Tp_lawsrcList } from  '@/enumeration/Tp_lawsrc'
import { St_lawList } from  '@/enumeration/St_law'
import { Tp_provision } from  '@/enumeration/Tp_provision'
import { addLawFile } from '@/api/law/law_doc'
import { nanoid } from 'nanoid'
export default {
    props: {
      infoForm: {
        type: Object,
        default () {
          return {
            id: '',
            title: '',
            type: undefined,
            pubunitid: undefined,
            pubdate: undefined,
            execdate: undefined,
            status: undefined,
            losedate: undefined,
            recorddate: undefined,
            source: undefined,
            pubcode: '',
            isAdd: true
          }
        }
      },
      // 发布机关查询数据
      unitList: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    data() {
      return {
        labelCol: { span: 6 }, // label宽
        wrapperCol: { span: 18 }, // 组件宽
        loading: false, //按钮显示
        Tp_lawList: Tp_lawList, // 法律性质
        lawTypeList: Tp_lawList, // 法律性质下拉框数据
        Tp_lawsrcList: Tp_lawsrcList, // 来源途径
        lawSrcTypeList: Tp_lawsrcList, //来管途径下拉框数据
        St_lawList: St_lawList, // 法律有效性
        lawValidTypeList: St_lawList, //法律有效性下拉框数据
        Tp_provision: Tp_provision, //法律条文类别
        unitTypeList: [],
        /**
        * 添加表单验证规则
        */
        rules: {
          title: [
            { required: true, message: '请输入法律法规名称', trigger: 'blur' },
            { max: 100, message: '长度不能超过100', trigger: 'blur' },
          ],
          adid:  [
            { required: true, message: '请输入区域编号', trigger: 'blur' },
            { max: 50, message: '长度不能超过50', trigger: 'blur' },
          ],
          type: [{ required: true, message: '请选择法律性质', trigger: 'change' }],
          pubunitid: [{ required: true, message: '请选择发布机关', trigger: 'change' }],
          pubdate: [{ required: true, message: '请选择发布日期', trigger: 'change' }],
          execdate: [{ required: true, message: '请选择施行日期', trigger: 'change' }],
          status: [{ required: true, message: '请选择有效性', trigger: 'change' }],
          source: [{ required: true, message: '请选择来源途径', trigger: 'change' }],
          pubcode:  [
            { required: true, message: '请输入发布文号', trigger: 'blur' },
            { max: 50, message: '发布文号不能超过100', trigger: 'blur' },
          ]
        }
      }
    },
    created() {
      this.unitTypeList = this.unitList;
    },
    methods: {
      /**
       * 下拉框选择事件
       * @param {} e 
       */
      selectTypeChange (e) {
        this.infoForm.type = e
        console.log(e)
      },
      selectUnitChange (e) {
        this.infoForm.pubunitid = e
        console.log(e)
      },
      selectStatusChange (e) {
        this.infoForm.status = e
        console.log(e)
      },
      selectSourceChange (e) {
        this.infoForm.source = e
        console.log(e)
      },
      /**
       * 关闭页面
       */
      onClose () {
        this.$emit('close')
      },
      /**
       * 重置表单
       */
      resetForm () {
          console.log('form', this.$refs.law_infoForm)
          this.$refs.law_infoForm.resetFields()
      },
      getNanoId() {
        return nanoid();
      },
      getDepartName(unitId) {
        for (let element of this.unitTypeList) {
          if (element.id == unitId) {
            return element.name;
          }
        }
      },
      /**
       * 提交表单
       */
      onSubmit () {
        let _this = this;
        let copyForm = JSON.parse(JSON.stringify(this.infoForm));
        copyForm.pubunitname = this.getDepartName(copyForm.pubunitid);
        // copyForm. = unitTypeList.filter
        this.$refs.law_infoForm.validate((valid) => {
          _this.loading = true
          if (valid) {
            console.log('submit!', copyForm)
            const savem = _this.$message.loading('数据正在保存中...', 0)
            if (copyForm.id == '' || copyForm.id == null || copyForm.id == undefined) {
              copyForm.id = _this.getNanoId()
            }
            addLawFile(copyForm).then((res) => {
              if (res.code !== 0) {
                setTimeout(savem, 0)
                _this.$message.error('法律法规保存失败')
              } else {
                setTimeout(savem, 0)
                _this.$message.success('保存成功')
                _this.$emit('reloadList')
                _this.$emit('close')
              }
              _this.loading = false
            })
          } else {
            _this.loading = false
            // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
            // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
            setTimeout(() => {
              const isError = document.getElementsByClassName('has-error')
              const input = isError[0].querySelector('input')
              //console.log(input)
              if (input !== null && input !== 'undefind' && input !== '') {
                isError[0].querySelector('input').focus()
                  ? isError[0].querySelector('input').focus()
                  : isError[0].querySelector('input').click()
              } else {
                isError[0].querySelector('textarea').focus()
              }
            }, 10)
            return false
          }
        })
      }
    }
}
</script>

<style lang="scss" scoped>

</style>
  